import { Form, Input, Button, Upload, message,Select,Radio  } from "antd";
import { Component, ReactNode } from "react";
const { Option } = Select;
import type { RadioChangeEvent } from 'antd';

import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import draftToHtml from "draftjs-to-html";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import { UploadOutlined } from "@ant-design/icons";
import { instance } from '../../utils/request';

interface AddNoticeFormProps {
  visible?: boolean;
  close?: () => void;
  closeModal: () => void; // 将closeModal方法作为props传递给子组件
}

class AddNoticeForm extends Component<AddNoticeFormProps> {
  state = {
    // 富文本存储的值
    editorText: '',
  };
  onFinish = (values: any) => {
    console.log(values);
    let params = {
      notice_name: values.notice_name,
      notice_type: values.notice_type,
      notice_status: values.notice_status,
      notice_content: this.state.editorText,
      is_read:1,
    };
    instance.post("/notices", params)
      .then((res) => {
        message.success("公告发布完成");
        this.props.closeModal();
      })
      .catch((error) => {
        console.log("error=", error);
      });
  };

  handleCustomRequest = (options:any) => {
    const { file, onError, onSuccess } = options;
    const ext = file.name.split('.')[1];
    if (!['jpg', 'jpeg', 'png'].includes(ext)) {
      message.error('请上传jpg、jpeg、png格式的图片');
      onError('File format not supported');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    instance.post("/upload", formData)
      .then((response) => {
        onSuccess(response, file);
      })
      .catch((error) => {
        onError(error);
      });
  };

  onChangeNoticeType = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
  };
  
  onFinishFailed = () => {};
  normFile = (e: any) => {
    console.log("Upload event:", e);
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  onEditorStateChange = (editorState: any) => {
    let html = draftToHtml(convertToRaw(editorState.getCurrentContent()));
    this.setState({ editorText: html });
  };

  render() {
    return (
      <div>
        <Form onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
          <Form.Item
            label="公告标题"
            name="notice_name"
            rules={[{ required: true, message: "请输入公告标题" }]}
          >
            <Input />
          </Form.Item>


{/*  单选 */}
          <Form.Item
            label="公告类型"
            name="notice_type"
            rules={[{ required: true, message: "请输入公告类型" }]}
          >
            <Radio.Group onChange={this.onChangeNoticeType} value={1}>
              <Radio value={1}>通知</Radio>
              <Radio value={2}>公告</Radio>
              <Radio value={3}>提醒</Radio>
            </Radio.Group>
          </Form.Item>

          {/*下拉 */}

          <Form.Item
            label="公告状态"
            name="notice_status"
            rules={[{ required: true, message: "请输入公告状态" }]}
          >
            <Select placeholder="请选择字典状态" style={{width:'200px'}}>
              <Option value="0">正常</Option>
              <Option value="1">禁用</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="公告内容"
            name="notice_content"
            rules={[
              {
                validator: (rule, value, callback) => {
                  const content = this.state.editorText
                  console.log(content,'1----')
                  if (content!=='') {
                    callback();
                  } else {
                    callback("请输入公告内容详情");
                  }
                },
              },
            ]}
          >
           <div  className="editor-container">
              <Editor
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={this.onEditorStateChange}
              />
            </div>
          </Form.Item>

          <Form.Item style={{float:'right',marginLeft:'10px'}}>
            <Button type="primary" htmlType="submit">
              发布
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default AddNoticeForm;
